<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>blog响应式布局</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="./css/index.css"/>
		<script src="./js/jquery-1.8.2.min.js"></script>
		<script type="text/javascript" src="js/index.js" defer="defer"></script>
	</head>
	<style type="text/css">
		#lib{
			width: 100%;height: 100%;background: #000;position: fixed;z-index: 9999;top: 0;opacity: 0.7;display: flex;justify-content: center;
			align-items: center;
			display: none;
		}
		.ewm{
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			z-index: 999999;
		}
		.close_lib{
			z-index: 999;
			position: absolute;
			top: 0;
			right: 5px;
			font-size: 60px;
		}
	</style>
	<body>
		<div class="lib_box">
			<div class="ewm">
				<img src="image/erm.jpg"/>
				<p style="color: #fff;font-family: arial;">扫一扫，手机访问</p>
			</div>
			<div id="lib" >
				<a href="javascript:;" style="color: #FFF;" class="close_lib"> X</a>
			</div>
		</div>
		<script type="text/javascript">
			$('.close_lib').click(function(){
				$('.lib_box').hide();
			})
		</script>
		<header>
			<div id="container">
				<div class="logo"></div>
				<ul class="top">
					<li class="index"><i class="iconfont">&#xe60c;</i><a href="">首页</a></li>
					<li><i class="iconfont">&#xe604;</i><a href="">相关技术</a></li>
					<li><i class="iconfont">&#xe61b;</i><a href="">相关下载</a></li>
					<li><i class="iconfont">&#xe751;</i><a href="">问题板块</a></li>
					<li><i class="iconfont">&#xe603;</i><a href="">样式参考</a></li>
					<li><i class="iconfont">&#xe673;</i><a href="">图标参考</a></li>
					<li><i class="iconfont">&#xe6ab;</i><a href="">更新日志</a></li>
				</ul>
				<div class="duihao">
					<i class="iconfont">&#xe63d;</i>
				</div>
				<button class="show"><i class="iconfont">&#xe62c;</i></button>
				<div class="hide" style="display: none;">
					<ul>
						<li class="index"><i class="iconfont">&#xe60c;</i><a href="">首页</a></li>
						<li><i class="iconfont">&#xe604;</i><a href="">相关技术</a></li>
						<li><i class="iconfont">&#xe61b;</i><a href="">相关下载</a></li>
						<li><i class="iconfont">&#xe751;</i><a href="">问题板块</a></li>
						<li><i class="iconfont">&#xe603;</i><a href="">样式参考</a></li>
						<li><i class="iconfont">&#xe673;</i><a href="">图标参考</a></li>
						<li><i class="iconfont">&#xe6ab;</i><a href="">更新日志</a></li>
					</ul>
				</div>
			</div>
		</header>
		<main>
			<div id="left">
				<div class="adgg">
					<p><button class="close">X</button>欢迎使用由 <a href="">佚站互联</a> 提供的 Zanblog主题，如有问题可以查看问题板块中的内容或者加入Zanblog官方1群：223133969(已满) Zanblog官方2群：308484218 </p>	
				</div>
				<div class="lunbo">
					<ul>
						<li><a href=""><img src="./image/banner_207.jpg"/></a></li>
						<li><a href=""><img src="./image/banner_zanui.jpg"/></a></li>
						<li><a href=""><img src="./image/zanblog3.jpg"/></a></li>
						<li><a href=""><img src="./image/banner_207.jpg"/></a></li>
					</ul>
				</div>
				<article>
					<div class="date">
						<span>9月</span>
						<strong>13</strong>
					</div>
					<div class="shuiq">
						<img src="./image/Image 4.png" alt="" />
					</div>
					<h2>Zanblog 更新至V2.1.0</h2>
					<ul>
						<li>Zanblog</li>
						<li>佚站互联</li>
						<li>14,048</li>
					</ul>
					<img src="./image/car_5.jpg"/>
					<p>HI，赞友们，在两个月前我们推出了ZanBlog3主题，但还是有一部分用户喜欢Zanblog2的样式，所以在V2.0.7发布8个多月之后，再次更新Zanblog2。 现在让我们一起看看 V2.1.0 所做的变动吧！ 注：使用Zanblog2之前版本的用户需要注意，插件、侧边栏、主题选项、页面模版... </p>
					<div class="readbox">						
						<a href="" class="read">阅读全文<em>228</em></a>
					</div>
				</article>
				<article>
					<div class="date">
						<span>9月</span>
						<strong>13</strong>
					</div>
					<div class="shuiq">
						<img src="./image/Image 4.png" alt="" />
					</div>
					<h2>Zanblog 更新至V2.1.0</h2>
					<ul>
						<li>Zanblog</li>
						<li>佚站互联</li>
						<li>14,048</li>
					</ul>
					<img src="./image/car_5.jpg"/>
					<p>HI，赞友们，在两个月前我们推出了ZanBlog3主题，但还是有一部分用户喜欢Zanblog2的样式，所以在V2.0.7发布8个多月之后，再次更新Zanblog2。 现在让我们一起看看 V2.1.0 所做的变动吧！ 注：使用Zanblog2之前版本的用户需要注意，插件、侧边栏、主题选项、页面模版... </p>
					<div class="readbox">						
						<a href="" class="read">阅读全文<em>228</em></a>
					</div>
				</article>
				<article>
					<div class="date">
						<span>9月</span>
						<strong>13</strong>
					</div>
					<div class="shuiq">
						<img src="./image/Image 4.png" alt="" />
					</div>
					<h2>Zanblog 更新至V2.1.0</h2>
					<ul>
						<li>Zanblog</li>
						<li>佚站互联</li>
						<li>14,048</li>
					</ul>
					<img src="./image/car_5.jpg"/>
					<p>HI，赞友们，在两个月前我们推出了ZanBlog3主题，但还是有一部分用户喜欢Zanblog2的样式，所以在V2.0.7发布8个多月之后，再次更新Zanblog2。 现在让我们一起看看 V2.1.0 所做的变动吧！ 注：使用Zanblog2之前版本的用户需要注意，插件、侧边栏、主题选项、页面模版... </p>
					<div class="readbox">						
						<a href="" class="read">阅读全文<em>228</em></a>
					</div>
				</article>
			</div>
			<div id="right">
				<aside>
					<h4>请登录</h4>
					<form action="">
						<div class="fbox">
							<div><img src="./image/Image 2.png"/></div>
							<input type="text" name="" id="" />
						</div>
						<div class="fbox">
							<div><img src="./image/Image 3.png"/></div>
							<input type="text" name="" id="" />
						</div>
						<div class="fbox">
							<input type="submit" value="登陆" />
							<a href="">注册</a>
						</div>
					</form>
				</aside>
				<aside>
					<div class="sousuo">						
						<input type="text" name="" id="" placeholder="搜索..."/>
						<div></div>
						<p><i class="iconfont">&#xe600;</i></p>
					</div>
				</aside>
				<aside class="zuixin">
					<h4>最新文章
						<p>
							<span class="dian jiant">^</span>
							<span class="dian cha">x</span>
						</p>
					</h4>
					<ul>
						<li><a href="">Zanblog 2.0.7（稳定版）更新</a><span>48,859</span></li>
						<li><a href="">Zanblog 2.0.7（稳定版）更新</a><span>48,859</span></li>
						<li><a href="">Zanblog 2.0.7（稳定版）更新</a><span>48,859</span></li>
					</ul>
				</aside>
				<aside class="zuixin">
					<h4>最新评论
						<p>
							<span class="dian jiant">^</span>
							<span class="dian cha">x</span>
						</p>
					</h4>
					<ul class="pingl">
						<li>
							<div><img src="./image/q11.png"/></div>
							<span><a href="">你好！请问下位置首页文章表情下的阅读全文数量一直为0 能帮我看下吗谢谢！ 我的... </a></span>
						</li>
						<li>
							<div><img src="./image/q11.png"/></div>
							<span><a href="">你好！请问下位置首页文章表情下的阅读全文数量一直为0 能帮我看下吗谢谢！ 我的... </a></span>
						</li>
						<li>
							<div><img src="./image/q11.png"/></div>
							<span><a href="">你好！请问下位置首页文章表情下的阅读全文数量一直为0 能帮我看下吗谢谢！ 我的... </a></span>
						</li>
					</ul>
				</aside>
			</div>
		</main>
		<footer>
			<p>Copyright © 2013 佚站互联 YEAHZAN.COM - 用心创造每一站, 杭州网站建设. All Rights Reserved. Theme By YeahZan</p>
		</footer>
		<div class="toTop">
			^
		</div>
	</body>
</html>
